<template>
  <div class="wacth-effect">
    <h1>当水温达到60度或者水位达到80cm时，给服务器发送告警</h1>
    <h2 ref="tempTitle">当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
    <button @click="logTempDom">打印水温的dom</button>
  </div>
</template>

<script lang="ts" setup name="WacthEffect">
import { ref, watch, watchEffect, defineExpose } from "vue";

let temp = ref(10);
let height = ref(0);
//变量名要与template中的ref的值相同
let tempTitle = ref();
function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}
function logTempDom() {
  console.log(tempTitle.value);
}
//指定需要监听的数据
// watch([temp, height], (newValue) => {
//   const [newTemp, newHeight] = newValue;
//   if (newTemp > 60) {
//     console.log("警告水温已经大于60度");
//   } else if (newHeight > 80) {
//     console.log("警告水位已经大于80cm");
//   } else {
//     console.log("一切正常");
//   }
// });
//不需要指定监听的数据，用到了什么，框架自动帮我们监听什么
watchEffect(() => {
  if (temp.value > 60) {
    console.log("watchEffect警告水温已经大于60度");
  } else if (height.value > 80) {
    console.log("watchEffect警告水位已经大于80cm");
  } else {
    console.log("watchEffect一切正常");
  }
});
let a = ref(0);
let b = ref(1);
let c = ref(2);
//需要暴露属性出去给别人用，使用defineExpose
defineExpose({ a, b, c });
</script>

<style scope>
.wacth-effect {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>